<template>
	<!-- <div v-if="isAuth(['ROOT', 'USER:SELECT'])"></div> -->
	<div v-if="isAuth(['ROOT', 'USER:SELECT'])">
	    <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
			<!-- prop引用验证规则 -->
	        <el-form-item prop="username">
	            <el-input v-model="dataForm.username" placeholder="用户名" class="input" clearable="clearable" />
	        </el-form-item>
	        <el-form-item>
	            <el-input v-model="dataForm.name" placeholder="昵称" class="input" clearable="clearable" />
	        </el-form-item>
	        <el-form-item>
	            <el-input v-model="dataForm.tel" placeholder="电话" class="input" clearable="clearable" />
	        </el-form-item>
	        <el-form-item>
	            <el-button type="primary" @click="searchHandle()">查询</el-button>
	            <el-button type="primary" :disabled="!isAuth(['ROOT'])" @click="addHandle()">
	                新增
	            </el-button>
	            <el-button type="danger" :disabled="!isAuth(['ROOT'])" @click="deleteHandle()">
	                批量删除
	            </el-button>
	        </el-form-item>
	    </el-form>
	    <el-table
	        :data="dataList"
	        border
	        v-loading="dataListLoading"
	        @selection-change="selectionChangeHandle"
	        :cell-style="{ padding: '3px 0' }"
	        style="width: 100%;"
	    >
	        <el-table-column
	            type="selection"
	            :selectable="selectable"
	            header-align="center"
	            align="center"
	            width="50"
	        />
	        <el-table-column type="index" header-align="center" align="center" width="80" label="序号">
	            <template #default="scope">
	                <span>{{ (pageIndex - 1) * pageSize + scope.$index + 1 }}</span>
	            </template>
	        </el-table-column>
	        <el-table-column
	            prop="username"
	            header-align="center"
	            align="center"
	            label="用户名"
	            min-width="100"
	            :show-overflow-tooltip="true"
	        />
	        <el-table-column prop="password" header-align="center" align="center" label="密码" min-width="200" />
			<el-table-column prop="name" header-align="center" align="center" label="昵称" min-width="100" />
			<el-table-column prop="sex" header-align="center" align="center" label="性别" min-width="100" />
	        <el-table-column prop="tel" header-align="center" align="center" label="电话" min-width="200" />
	        <el-table-column
	            prop="email"
	            header-align="center"
	            align="left"
	            label="邮箱"
	            min-width="200"
	            :show-overflow-tooltip="true"
	        />
			<el-table-column prop="job" header-align="center" align="center" label="工作" min-width="100" />
			<el-table-column prop="create_time" header-align="center" align="center" label="创建时间" min-width="100" />
	        <el-table-column header-align="center" align="center" width="150" label="操作">
	            <template #default="scope">
	                <el-button
	                    type="text"
	                    :disabled="!isAuth(['ROOT'])"
	                    @click="updateHandle(scope.row.id)"
	                >
	                    修改
	                </el-button>
	                <el-button
	                    type="text"
	                    :disabled="!isAuth(['ROOT']) || scope.row.subs > 0"
	                    @click="deleteHandle(scope.row.id)"
	                >
	                    删除
	                </el-button>
	            </template>
	        </el-table-column>
	    </el-table>
	    <el-pagination
	        @size-change="sizeChangeHandle"
	        @current-change="currentChangeHandle"
	        :current-page="pageIndex"
	        :page-sizes="[10, 20, 50]"
	        :page-size="pageSize"
	        :total="totalCount"
	        layout="total, sizes, prev, pager, next, jumper"
	    ></el-pagination>
	
	    <add-or-update ref="addOrUpdate" @refreshDataList="loadDataList"></add-or-update>
	</div>
</template>

<script>
import AddOrUpdate from './user-add-or-update.vue';
export default {
	components: {
		AddOrUpdate
	},
	data() {
		return {
			dataForm: {
			    name: null,
			    username: null,
			    tel: null
			},
			dataList: [],
			pageIndex: 1,
			pageSize: 10,
			totalCount: 0,
			dataListLoading: false,
			dataListSelections: [],
			dataRule: {
			    username: [{ required: false, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{1,10}$', message: '格式错误' }],
				name: [{ required: false, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{1,10}$', message: '格式错误' }],
				tel: [{ required: false, pattern: '^[a-zA-Z0-9\u4e00-\u9fa5]{1,10}$', message: '格式错误' }]
			}
		};
	},
	methods: {
		loadDataList: function() {
		    let that = this;
		    that.dataListLoading = true;
		    let data = {
		        name: that.dataForm.name == '' ? null : that.dataForm.name,
		        username: that.dataForm.username == '' ? null : that.dataForm.username,
		        tel: that.dataForm.tel == '' ? null : that.dataForm.tel,
		        page: that.pageIndex,
		        length: that.pageSize
		    };
		
		    that.$http('/mis_user/searchByPage', 'POST', data, true, function(resp) {
		        let result = resp.result;
		        that.dataList = result.list;
		        that.totalCount = result.totalCount;
		        that.dataListLoading = false;
		    });
		},
		sizeChangeHandle: function(val) {
		    this.pageSize = val;
		    this.pageIndex = 1;
		    this.loadDataList();
		},
		currentChangeHandle: function(val) {
		    this.pageIndex = val;
		    this.loadDataList();
		},
		searchHandle: function() {
		    this.$refs['dataForm'].validate(valid => {
		        if (valid) {
		            this.$refs['dataForm'].clearValidate();
		            if (this.dataForm.name == '') {
		                this.dataForm.name = null;
		            }
		            if (this.pageIndex != 1) {
		                this.pageIndex = 1;
		            }
		            this.loadDataList();
		        } else {
		            return false;
		        }
		    });
		},
		addHandle:function(){
			this.$nextTick(()=>{
				this.$refs.addOrUpdate.init()
			})
		},
		selectionChangeHandle: function(val) {
		    this.dataListSelections = val;
		},
		deleteHandle: function(id) {
		    let that = this;
		    let ids = id
		        ? [id]
		        : that.dataListSelections.map(item => {
		              return item.id;
		          });
		    if (ids.length == 0) {
		        ElMessage({
		            message: '没有选中记录',
		            type: 'warning',
		            duration: 1200
		        });
		    } else {
		        ElMessageBox.confirm('确定要删除选中的记录？', '提示信息', {
		            confirmButtonText: '确定',
		            cancelButtonText: '取消',
		            type: 'warning'
		        }).then(() => {
		            that.$http('/mis_user/deleteByIds', 'POST', { ids: ids }, true, function(resp) {
		                ElMessage({
		                    message: '操作成功',
		                    type: 'success',
		                    duration: 1200,
		                    onClose: () => {
		                        that.loadDataList();
		                    }
		                });
		            });
		        });
		    }
		},
		updateHandle: function(id) {
			console.log(id);
		    this.$nextTick(() => {
		        this.$refs.addOrUpdate.init(id);
		    });
		},
	},
	created: function() {
		this.loadDataList();
	}
};
</script>

<style lang="less" scoped="scoped"></style>
